<script setup>
import {ref,inject} from "vue"
import {Search} from "@element-plus/icons-vue"
import {ElSelect, ElOption} from 'element-plus'

//登录相关逻辑
const userinfo=inject("userinfo")

const search_type=ref('*')
const search_keyword=ref('')
</script>

<template>
<div class="container">
    <div class="search-header">
        <el-image src="/img/search.png" style="max-width: 400px;"/>
    </div>
    <div class="search-container">
        <el-select v-model="search_type" size="large" style="width:220px;">
            <el-option
                key="*"
                label="全部"
                value="*"
            />
            <el-option
                key="part"
                label="关键零部件"
                value="part"
            />
            <el-option
                key="software"
                label="关键软件"
                value="software"
            />
            <el-option
                key="design"
                label="设计与集成"
                value="design"
            />
            <el-option
                key="manufacture"
                label="加工生产"
                value="manufacture"
            />
            <el-option
                key="certification"
                label="检测认证"
                value="certification"
            />
            <el-option
                key="scenario"
                label="应用场景"
                value="scenario"
            />
            <el-option
                key="finance"
                label="金融服务"
                value="finance"
            />
        </el-select>
        <el-input v-model="search_keyword" placeholder="请输入关键字" clearable size="large"/>
        <el-button type="primary" :icon=Search size="large"></el-button>
    </div>
    <div class="statistic">
        <div class="item">
            <el-statistic title="关键零部件" :value="3" >
            </el-statistic>
        </div>
        <div class="item">
            <el-statistic title="关键软件" :value="3"  >
            </el-statistic>
        </div>
        <div class="item">
            <el-statistic title="设计与集成" :value="3"  >
            </el-statistic>
        </div>
        <div class="item">
            <el-statistic title="加工生产" :value="3"  >
            </el-statistic>
        </div>
        <div class="item">
            <el-statistic title="检测认证" :value="3"  >
            </el-statistic>
        </div>
        <div class="item">
            <el-statistic title="应用场景" :value="3"  >
            </el-statistic>
        </div>
        <div class="item">
            <el-statistic title="金融服务" :value="3"  >
            </el-statistic>
        </div>
    </div>
</div>
</template>

<style scoped>
.container{
    display:flex;
    flex-direction:column;
    align-items: center;
}
.search-container{
    display:flex;
}
.el-input{
    min-width:100px;
}
.statistic{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    width:80%;
    margin-top:30px;
    padding-top:30px;
    border-radius:10px;
    background-color:rgb(240, 240, 240);
    box-shadow: var(--el-box-shadow);
}
.item{
    width:100px;
    height:90px;
    text-align:center;
}

:deep(.el-statistic__head) {
    font-size: medium;
    text-shadow:1px 1px 2px black;
}

:deep(.el-statistic__number) {
    font-size: x-large;
    color:var(--el-color-primary);
    font-weight:bolder;
    text-shadow:1px 1px 2px black;
}
:deep(.el-statistic__suffix){
    font-size:medium;
    color:var(--el-color-primary);
}
</style>